import type { ColumnsType } from 'antd/es/table'
import { Space, Tag, Button } from 'antd'

export interface DataType {
    key: string
    name: string
    age: number
    address: string
    tags: string[]
}

// columns 生成函数，接收操作方法
export function getColumns(handleEdit: (name: string) => void): ColumnsType<DataType> {
    return [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green'
                        if (tag === 'loser') {
                            color = 'volcano'
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        )
                    })}
                </>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="primary" onClick={() => handleEdit(record.name)}>
                        编辑
                    </Button>
                </Space>
            ),
        },
    ]
}